<template>
	<view>
		<view class="latest">
			<view class="subscript">最近的纪念日</view>
			<view class="title">{{latestItem.name}}{{latestItem.displayType?'已有':'还有'}}</view>
			<view class="content">
				<text class="days">{{latestItem.days}}</text> 天
			</view>
			<view class="date">{{latestItem.displayType?'起始日':'目标日'}}：{{latestItem.time}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'LatestItem',
		props: {
			latestItem: Object
		}
	}
</script>

<style lang="scss" scoped>
	.latest {
		background: url('https://coder-love.oss-cn-shanghai.aliyuncs.com/anniversary_pen.png');
		background-color: #fff;
		background-position: 100% 100%;
		background-repeat: no-repeat;
		background-size: auto 80%;
		border-radius: 30rpx;
		padding: 40rpx 48rpx;
		position: relative;

		.subscript {
			background-color: #ffe62b;
			border-radius: 0 30rpx 0 30rpx;
			font-size: 27rpx;
			height: 60rpx;
			line-height: 60rpx;
			position: absolute;
			right: 0;
			text-align: center;
			top: 0;
			width: 240rpx;
		}

		.title {
			color: #222;
			font-size: 30rpx;
		}

		.content {
			color: #222;
			font-size: 24rpx;
			margin: 30rpx 0 60rpx;

			.days {
				color: #ff445a;
				font-size: 60rpx;
				font-weight: 700;
				margin: 0 15rpx 0 0;
			}
		}

		.date {
			color: #999;
			font-size: 28rpx;
		}
	}
</style>
